<dx-data-grid #grid id="gridContainer" [dataSource]="employees" [showRowLines]="true" [columnAutoWidth]="true" [allowColumnReordering]="true"
    [allowColumnResizing]="true" [columnAutoWidth]="true" [columnFixing]="{enabled:true}" [headerFilter]="{visible:true}" (onRowPrepared)="onRowPrepared($event)"
    rowTemplate="rowTemplate" (onCellPrepared)="onCellPrepared($event)">

    <dxi-column dataField="Prefix" [width]="70" caption="Title"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position"></dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
    <dxi-column dataField="HireDate" dataType="date"></dxi-column>

    <ng-container *dxTemplate="let employee of 'rowTemplate'">
        <ng-container *ngIf="employee.data | rowTemplate">
            <tbody>
                <ng-container *ngTemplateOutlet="labelTemplate; context: employee"></ng-container>
            </tbody>
        </ng-container>
    </ng-container>

    <!-- <ng-template #dataTemplate let-data="data">
        <tr [ngClass]="data | rowStyle" (click)="expandDataRows(data)" class="dx-row dx-data-row dx-row-lines dx-column-lines" role="row">
            <td>{{data.Prefix}}</td>
            <td>{{data.FirstName}}</td>
            <td>{{data.LastName}}</td>
            <td>{{data.Position}}</td>
            <td>{{data.BirthDate | date: "yyyy/MM/dd"}}</td>
            <td>{{data.HireDate | date: "yyyy/MM/dd"}}</td>
        </tr>
        <ng-container *ngFor="let item of data.childs" class="child-row dx-row dx-data-row dx-row-lines dx-column-lines" role="row">
            <ng-container *ngIf="item | rowTemplate; else elseDataTemplate">
                <ng-container *ngTemplateOutlet="labelTemplate; context: {data: item}"></ng-container>
            </ng-container>
            <ng-template #elseDataTemplate>
                <ng-container *ngTemplateOutlet="dataTemplate; context: {data: item}"></ng-container>
            </ng-template>
        </ng-container>
    </ng-template> -->

    <ng-template #labelTemplate let-data="data">
        <tr [ngClass]="data | rowStyle" class="dx-row dx-data-row dx-row-lines dx-column-lines" role="row">
            <td>
                <button (click)="expandDataRows(data)">&lt;</button>
                {{data.Prefix}}</td>
            <td>{{data.FirstName}}</td>
            <td>{{data.LastName}}</td>
            <td>{{data.Position}}</td>
            <td>{{data.BirthDate | date: "yyyy/MM/dd"}}</td>
            <td>{{data.HireDate | date: "yyyy/MM/dd"}}</td>
        </tr>
        <ng-container *ngFor="let item of data.childs" class="child-row dx-row dx-data-row dx-row-lines dx-column-lines" role="row">
            <!-- <ng-container *ngIf="item | rowTemplate; else elseDataTemplate"> -->
            <ng-container *ngTemplateOutlet="labelTemplate; context: {data: item}"></ng-container>
            <!-- </ng-container>
            <ng-template #elseDataTemplate>
                <ng-container *ngTemplateOutlet="dataTemplate; context: {data: item}"></ng-container>
            </ng-template> -->
        </ng-container>
    </ng-template>
</dx-data-grid>